<template>
    <div>
        <div class="title" style="font-size: 30px;padding-bottom: 20px;">
        <h1>/打包上传基于vue2项目到gitee上/</h1>
        <el-divider content-position="right">--此项目在vue3框架上基于vue2创建的--</el-divider>
        </div>
        <div class="content">
            <span>
                <h2>一、只有项目，还没建立仓库和连接仓库</h2>
                <el-divider></el-divider>
                <h3>1.先在项目路径下打包好项目</h3>
                <h4>->npm run build</h4>
                <h3>2.打包好后生成dist文件，由于路径问题，做以下修改。</h3>
                <h4>(1) 在项目的vue.config.js里加上publicPath: ' '</h4>
                <span><img src="../../src/assets/image/learn1-1.png" alt=""></span>
                <h4>(2) 在项目的.gitignore里给/dist加上#，变为#/dist。</h4>
                <span><img src="../../src/assets/image/learn1-3.png" alt=""></span>
                <h4>(3) 在项目router文件下的index.js里查看mode是否为hash,若为history,改为hash。</h4>
                <span><img src="../../src/assets/image/learn1-2.png" alt=""></span>
                <h3>3.在gitee上新建仓库，自定义仓库名称，点击创建。</h3>
                <h3>4.根据gitee提供，全局配置用户名和邮箱号(注意：以下两个命令每个人的不一样，以gitee提供为准)</h3>
                <h4>->git config --global user.name "雨停"</h4>
                <h4>->git config --global user.email "8169410+the-rain-stopped@user.noreply.gitee.com"</h4>
                <h3>5.依次执行以下命令。</h3>
                <h4>->git init</h4>
                <h4>->git remote add origin https://gitee.com/the-rain-stopped/vue.git    注意：这里的命令每个人的地址不一样</h4> 
                <h4>->git add .</h4>
                <h4>->git commit -m "first commit"    注意：这里双引号里的备注自定义</h4>
                <h4>->git push -u origin "master"</h4>
                <h3>6.上传成功。</h3>
                <h3>7.之后可以去gitee上面开启 Gitee Pages 服务(注意：以下步骤是在Gitee Pages已经配置好的情况）</h3>
                <h4>(1) 打开Gitee Pages</h4>
                <span><img src="../../src/assets/image/learn1-4.png" alt=""></span>
                <h4>(2) 输入部署目录为dist,点击开启</h4>
                <span><img src="../../src/assets/image/learn1-5.png" alt=""></span>
                <h4>(3) 然后就有网址啦！</h4>
                ->http://the-rain-stopped.gitee.io/pupa-vue-cli-element 
                <h4>(4) 注意之后的每次上传项目都要更新Gitee Pages，网址内容才能更新</h4>
            </span>
            <span>
                <el-divider></el-divider>
                <h2>二、已经建立仓库和连接仓库，平时打包上传流程</h2>
                <el-divider></el-divider>
                <h3>1.打包好项目</h3>
                <h4>->npm run build</h4>
                <h3>2.然后上传，依次执行以下命令。</h3>
                <h4>->git add .</h4>
                <h4>->git commit -m "1"    注意：这里双引号里的备注自定义</h4>
                <h4>->git push -u origin "master"</h4>
                <h3>6.上传成功。</h3>
            </span>
            
            <span>
                <el-divider></el-divider>
                <h2>三、说明上面项目的创建过程</h2>
                <el-divider></el-divider>
                <h3>1.首先，创建项目</h3>
                <h4>->vue create pupa  注意：自定义名pupa</h4>
                <h3>2.创建过程中出现选择，选基于vue或vue3，我选了vue2</h3>
                <h3>3.创建成功后，进入项目路径与运行</h3>
                <h4>->cd pupa</h4>
                <h4>->npm run serve</h4>
            </span>
        </div>
    </div>
</template>

<style lang="less" scoped>
.content{
    text-align:left;
    h2{
        font-size: 25px;
    }
    h3,h4{
        font-size: 20px;
        margin: 10px 0;
    }
}
</style>

<script>
export default{
    name: 'vueLearn1', //与路由router里配置的name一样
    data() {
        return {}
    }
}
</script>